<template>
  <div>
    <div style="width: 220px">
      <div class="padding-xs">
        <div class="padding-top-xs padding-bottom-xs remark">快捷筛选</div>
        <a-input-group compact v-if="type == 'input'">
          <a-select v-model="op" style="width: 80px">
            <a-select-option value="cn"> 包含 </a-select-option>
            <a-select-option value="nc"> 不包含 </a-select-option>
            <a-select-option value="eq"> 等于 </a-select-option>
            <a-select-option value="ne"> 不等于 </a-select-option>
            <a-select-option value="bw"> 开始于 </a-select-option>
            <a-select-option value="ew"> 结束于 </a-select-option>
          </a-select>
          <a-input
            style="width: 130px"
            v-model="key"
            allowClear
            placeholder="搜索关键字"
          />
        </a-input-group>
        <div v-else-if="type == 'number'">
          <a-input-number
            v-model="min"
            style="width: 100%"
            placeholder="最小值"
          ></a-input-number>
          <div class="padding-top-xs padding-bottom-xs remark">~</div>
          <a-input-number
            v-model="max"
            style="width: 100%"
            placeholder="最大值"
          ></a-input-number>
        </div>

        <div v-else-if="type == 'datetime'">
          <a-date-picker
            v-model="min"
            :disabled-date="disabledStartDate"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择开始时间"
          />
          <div class="padding-top-xs padding-bottom-xs remark">~</div>
          <a-date-picker
            v-model="max"
            :disabled-date="disabledEndDate"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择结束时间"
          />
        </div>
      </div>
    </div>
    <a-divider v-if="options.length > 0" style="margin: 2px 0"></a-divider>
    <div class="flex justify-between align-center">
      <ul
        style="width: 100%"
        class="ant-select-dropdown-menu ant-select-dropdown-menu-vertical ant-select-dropdown-menu-root"
      >
        <li
          class="ant-select-dropdown-menu-item"
          style="margin-top: 1px"
          :class="{ 'ant-select-dropdown-menu-item-selected': item.checked }"
          v-for="item in options"
          :key="item.value"
          @click="item.checked = !item.checked"
        >
          <div class="flex justify-between align-center">
            <span
              v-if="item.color"
              style="padding: 0px 12px"
              class="eip-color-btn"
              :style="{ 'background-color': item.color }"
            >
              {{ item.label }}
            </span>

            <span v-else>
              {{ item.label }}
            </span>
            <a-icon type="check" v-if="item.checked" />
          </div>
        </li>
      </ul>
    </div>

    <a-divider class="divider-margin"></a-divider>
    <div class="flex justify-between align-center">
      <ul
        style="width: 100%"
        class="ant-select-dropdown-menu ant-select-dropdown-menu-vertical ant-select-dropdown-menu-root"
      >
        <li
          class="ant-select-dropdown-menu-item"
          :class="{ 'ant-select-dropdown-menu-item-selected': item.checked }"
          v-for="item in write"
          :key="item.title"
          @click="writeSure(item)"
        >
          <div class="flex justify-between align-center">
            <span>{{ item.title }}</span>
            <a-icon type="check" v-if="item.checked" />
          </div>
        </li>
      </ul>
    </div>
    <a-divider class="divider-margin"></a-divider>
    <div style="display: flex; justify-content: space-between">
      <div></div>
      <div class="padding-xs" style="padding-top: 0; margin-right: 10px">
        <a-space>
          <a-button type="primary" size="small" @click="confirmFilterEvent"
            >确定</a-button
          >
          <a-button size="small" @click="resetFilterEvent">清除</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "filterModal",
  props: {
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      write: [
        {
          op: "nu",
          title: "为空",
          checked: false,
        },
        {
          op: "nn",
          title: "不为空",
          checked: false,
        },
      ],
      op: "cn",
      key: null,
      type: "input",
      options: [], //下拉多选

      min: null, //数值类型最小值
      max: null, //数值类型最大值

      column: { params: {} },
      table: {},
      panel: {},

      option: {},
    };
  },
  watch: {
    params() {
      this.init();
    },
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      if (this.params) {
        this.column = this.params.column;
        this.option = this.column.filters[0];
        this.table = this.params.$table;
        this.panel = this.params.$panel;
        const { op, key, write, options, type, min, max } =
          this.column.filters[0].data;
        this.op = op;
        this.key = key;
        this.type = type ? type : "input";
        this.options = options ? options : [];
        if (type == "datetime") {
          this.min = min ? moment(min) : null;
          this.max = max ? moment(max) : null;
        } else {
          this.min = min;
          this.max = max;
        }

        this.write.forEach((w) => {
          w.checked = w.op == write;
        });
      }
    },
    /**
     * 时间选择器
     * @param min
     */
    disabledStartDate(min) {
      const max = this.max;
      if (!min || !max) {
        return false;
      }
      return min.valueOf() > max.valueOf();
    },

    /**
     * 时间选择器
     * @param min
     */
    disabledEndDate(max) {
      const min = this.min;
      if (!max || !min) {
        return false;
      }
      return min.valueOf() >= max.valueOf();
    },
    /**
     * 只读确定
     */
    writeSure(item) {
      this.write.forEach((w) => {
        if (w.title == item.title) {
          item.checked = !item.checked;
        } else {
          w.checked = false;
        }
      });
    },

    /**
     * 清除筛选
     */
    resetFilterEvent() {
      this.panel.resetFilter();
    },
    /**
     * 确认筛选
     */
    confirmFilterEvent() {
      if (this.params && this.option) {
        var writeCheck = this.$utils.find(this.write, (f) => f.checked);
        this.option.data.write = writeCheck ? writeCheck.op : null;
        this.option.data.key = this.key;
        this.option.data.op = this.op;
        this.option.data.options = this.options;
        if (this.option.data.type == "datetime") {
          this.option.data.min = this.min
            ? moment(this.min).format("YYYY-MM-DD HH:mm:ss")
            : null;

          this.option.data.max = this.max
            ? moment(this.max).format("YYYY-MM-DD HH:mm:ss")
            : null;
        } else {
          this.option.data.min = this.min;
          this.option.data.max = this.max;
        }

        //判断是否具有筛选值
        if (writeCheck == null) {
          var reset = false;
          if (this.option.data.type == "input") {
            if (!this.key) {
              reset = true;
            }
          } else if (["datetime", "number"].includes(this.option.data.type)) {
            if (!this.max && !this.min) {
              reset = true;
            }
          } else if (["switch", "select"].includes(this.option.data.type)) {
            var checked = this.$utils.find(this.options, (f) => f.checked);
            if (!checked) {
              reset = true;
            }
          }

          if (reset) {
            this.resetFilterEvent();
            return false;
          }
        }
        this.panel.changeOption(null, true, this.option);
        this.panel.confirmFilter();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.divider-margin {
  margin: 2px 0;
}

.remark {
  color: rgba(0, 0, 0, 0.45);
}
</style>
